<template>
  <el-card class="box-card">
      <div slot="header" style="text-align:left">
           <span> 应用：{{appName}}</span><span style="margin-left:10px"><el-button type="primary" @click="addMenu" icon="el-icon-edit">添加</el-button></span>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="name" label="名称"  sortable width="180"></el-table-column>
        <el-table-column  prop="type" label="类型"> 
          <template slot-scope="scope">
                      <span  v-if="(scope.row.type=='MENU')">菜单</span>
                      <span  v-else >功能</span>
            </template>
        </el-table-column>
        <el-table-column  prop="icon" label="icon"> </el-table-column>
          <el-table-column  prop="sortNum" label="排序"> </el-table-column>
        <el-table-column  prop="router" label="路由地址"> </el-table-column>
        <el-table-column  prop="url" label="接口地址"> </el-table-column>
        <el-table-column label="操作" style="width: 10%">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="editMenu(scope.row)">编辑</el-button>
               <el-popconfirm title="确定删除吗？" @onConfirm="deleMenu(scope.row.id)">
                    <el-button  type="text" slot="reference" size="small" >删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
      </el-table>

        <!--编辑菜单-->
        <el-dialog title="添加/编辑" :visible.sync="editMenuVisible" >
          <el-form :model="menuform" :rules="rules" label-position="left" ref="menuform" label-width="150px">
            <el-form-item label="菜单名称"  prop="name">
              <el-input v-model="menuform.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="icon"  prop="icon">
              <el-input v-model="menuform.icon" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="类型"  prop="type">
                 <el-select v-model="menuform.type" placeholder="请选择">
                      <el-option value="MENU" label="菜单"></el-option>
                      <el-option value="FUNC" label="功能"></el-option>
                 </el-select>
            </el-form-item>
            <el-form-item label="节点"  prop="parentId">
                <select-tree   v-model="menuform.parentId"  :options="treeData"  />
            </el-form-item>
             <el-form-item label="接口地址"  prop="url" >
              <el-input v-model="menuform.url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="路由路由"  prop="router">
              <el-input v-model="menuform.router" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="排序"  prop="sortNum" >
             <el-input-number v-model="menuform.sortNum"  :min="0" :max="50" ></el-input-number>
            </el-form-item>
            
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="editMenuVisible = false">取 消</el-button>
              <el-button type="primary" @click="addMenuSub">确 定</el-button>
          </div>
        </el-dialog>

  </el-card>
</template>
<script>
import {appMenus,appAddResource,appDeleResource} from "@/libs/api.js";
import SelectTree from '@/components/common/SelectTree.vue';
  export default {
     components: {
        SelectTree
    },
    data() {
      return {
        appName:"",
        tableData: [],
        editMenuVisible:false,
        menuform:{sortNum:1},
        treeData:[],
        rules: {
          name: [
            { required: true, message: '请填写资源名称', trigger: 'blur' },
             { min: 2, max: 20, message: '长度在 2 到 20个字符', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择资源类型', trigger: 'change' }
          ],
          router: [
            {  required: true, message: '请填资源路由地址', trigger: 'change' }
          ],
          url: [
            {  required: true, message: '请填资源接口地址', trigger: 'change' }
          ],
          sortNum: [
            {  required: true, message: '请填资源排序', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
 
    },
    methods:{
      //添加菜单按钮
        addMenu(){
          this.treeData= [{"label":"根节点","parentId":"","id":"",children:this.tableData}];
          this.menuform.id="";
          this.editMenuVisible=true;
        },
        //提交添加菜单
        addMenuSub(){
            this.$refs["menuform"].validate((valid) => {
                if (valid) {
                  this.menuform.appId=this.$route.query.id;
                     appAddResource(this.menuform).then(res => {
                       this.$util.success("操作成功");
                       this.editMenuVisible=false;
                       this.menuform={sortNum:1};
                       this.loadTree();
                    });
                } else {
                  return false;
                }
              });
        },
        //删除菜单
        deleMenu(id){
            appDeleResource(id).then(res =>{
               this.$util.success("删除成功");
                this.$util.afterDeleTree(this.tableData,{id:id});
            })
        },
        //编辑
        editMenu(row){
          this.treeData= [{"label":"根节点","parentId":"","id":"",children:this.tableData}];
          this.editMenuVisible=true;
          // this.menuform=Object.assign({},row);
            this.menuform=row;
        },
        //加载资源树
        loadTree(){
          if (this.$route.query.id) {
                  appMenus(this.$route.query.id).then(res => {
                    this.tableData=res;
                  });
          }
        }
    },
    
  mounted() {
    this.loadTree();
    if (this.$route.query.name) {
       this.appName=this.$route.query.name
    }
  },
  }
</script>
